Sincronizar com o momento do vídeo
Karoline Martins
Público
0/140
30.0 segundos
Continue criando clipes quando o anúncio acabar
Não é possível criar um clipe enquanto um anúncio está sendo reproduzido
Hospedagem de sites anuais na Hostinger com até 77% de desconto: https://hostinger.com.br/rafa + cupom RAFA No video de hoje eu mostro pra vocês como é simples e rápido montar uma página web de landing page apenas com HTML e CSS! Nesse caso, utilizamos o projeto da Balle Bot, um robô que modera a nossa comunidade no Discord, que inclusive está aberto para qualquer pessoa que queira participar =) link abaixo O que mais você quer ver aqui no canal? Comenta aqui embaixo pra eu saber! ------------------------------------------------------------------------------------------------------------------ Links importantes: Visual Studio Code: https://code.visualstudio.com/Download Figma com o Design: https://www.figma.com/file/myqP66iQwz... Extensão Ballerini Theme: https://marketplace.visualstudio.com/... Extensão Live Server: https://marketplace.visualstudio.com/... Google Fonts: https://fonts.google.com/ Guia do Flexbox: https://css-tricks.com/snippets/css/a... Repositório com o código desse vídeo: https://github.com/rafaballerini/Land... Comunidade no Discord: https://discord.gg/wagxzStdcR Minhas redes sociais: https://beacons.ai/rafaballerini Desconto da ALURA: https://www.alura.com.br/promocao/raf... Conteúdo adicional: Dicionário de tags HTML: https://www.instagram.com/p/CHiQXYPgX... Principais propriedades CSS: https://www.instagram.com/p/CIQnsYugB... Seletores CSS: https://www.instagram.com/p/CH8AD71AH... ------------------------------------------------------------------------------------------------------------------- índice do vídeo: 00:00 - O que é Landing Page 02:15 - Conheça a Hostinger 03:04 - Configurando o ambiente 03:46 - Criando o projeto 04:54 - Iniciando com HTML 05:55 - Head + metadados do HTML 09:04 - Body + tags semânticas do HTML 10:54 - Cabeçalho do HTML + Live Server 15:30 - Conteúdo principal do HTML 19:04 - Footer do HTML 19:55 - Detalhes visuais da página 20:37 - Iniciando com CSS e adicionando as classes 22:28 - Importanto fontes no Google Fonts 25:05 - Reset CSS: apagando pré configurações 27:01 - Estilizando o body 27:40 - Importanto o CSS no HTML 28:38 - Estilizando o cabeçalho 29:26 - Flexbox: conceitos e como utilizar 38:09 - Estilizando conteúdo principal pt 1 51:22 - Estilizando conteúdo principal pt 2 56:16 - Estilizando o footer 58:36 - Desafio 59:10 - Efeito hover: estilo ao passar o mouse por cima 1:00:35 - Adicionando links no menu 1:01:15 - Finalização + cupom da Hostinger #html #css #landingpage
Rafaella Ballerini
199 mil inscritos
Inscrito
Hospedagem de sites anuais na Hostinger com até 77% de desconto: https://hostinger.com.br/rafa + cupom RAFA No video de hoje eu mostro pra vocês como é simples e rápido montar uma página web de landing page apenas com HTML e CSS! Nesse caso, utilizamos o projeto da Balle Bot, um robô que modera a nossa comunidade no Discord, que inclusive está aberto para qualquer pessoa que queira participar =) link abaixo O que mais você quer ver aqui no canal? Comenta aqui embaixo pra eu saber! ------------------------------------------------------------------------------------------------------------------ Links importantes: Visual Studio Code: https://code.visualstudio.com/Download Figma com o Design: https://www.figma.com/file/myqP66iQwz... Extensão Ballerini Theme: https://marketplace.visualstudio.com/... Extensão Live Server: https://marketplace.visualstudio.com/... Google Fonts: https://fonts.google.com/ Guia do Flexbox: https://css-tricks.com/snippets/css/a... Repositório com o código desse vídeo: https://github.com/rafaballerini/Land... Comunidade no Discord: https://discord.gg/wagxzStdcR Minhas redes sociais: https://beacons.ai/rafaballerini Desconto da ALURA: https://www.alura.com.br/promocao/raf... Conteúdo adicional: Dicionário de tags HTML: https://www.instagram.com/p/CHiQXYPgX... Principais propriedades CSS: https://www.instagram.com/p/CIQnsYugB... Seletores CSS: https://www.instagram.com/p/CH8AD71AH... ------------------------------------------------------------------------------------------------------------------- índice do vídeo: 00:00 - O que é Landing Page 02:15 - Conheça a Hostinger 03:04 - Configurando o ambiente 03:46 - Criando o projeto 04:54 - Iniciando com HTML 05:55 - Head + metadados do HTML 09:04 - Body + tags semânticas do HTML 10:54 - Cabeçalho do HTML + Live Server 15:30 - Conteúdo principal do HTML 19:04 - Footer do HTML 19:55 - Detalhes visuais da página 20:37 - Iniciando com CSS e adicionando as classes 22:28 - Importanto fontes no Google Fonts 25:05 - Reset CSS: apagando pré configurações 27:01 - Estilizando o body 27:40 - Importanto o CSS no HTML 28:38 - Estilizando o cabeçalho 29:26 - Flexbox: conceitos e como utilizar 38:09 - Estilizando conteúdo principal pt 1 51:22 - Estilizando conteúdo principal pt 2 56:16 - Estilizando o footer 58:36 - Desafio 59:10 - Efeito hover: estilo ao passar o mouse por cima 1:00:35 - Adicionando links no menu 1:01:15 - Finalização + cupom da Hostinger #html #css #landingpage